<template>
  <div>
    <div style="position: fixed;top: 0;left: 0;width: 100%;height:100%;background-color: #e6faff"></div>
    <div style="position: absolute;top: 50.5px;left: 0;width: 100%;height:120px;background-color:#00ccbb">
      <p style="font-size: 31px;font-weight:800;color: white;letter-spacing: 3px;margin-left: 300px;padding: 5px;font-style: italic">找工作</p>
      <p style="font-size: 31px;font-weight:800;color: white;letter-spacing: 3px;margin-left: 300px;font-style: italic">上树叶招聘</p>
    </div>
    <div style="position: fixed;top: 0;left: 0;width: 100%;height: 50.5px;background-color: #39494d">
      <h3 style="color: #00e3e6;letter-spacing: 3px;padding: 10px;margin-left: 260px">树叶招聘网</h3>
    </div>
    <div style="position: absolute">
      <ul>
        <li><a @click="this.$router.push('/seekingjob')" v-if="user.position === '求职者'">求职</a></li>
        <li><a @click="this.$router.push('/employ')" v-if="user.position === 'HR'">招聘</a></li>
        <li><a @click="this.$router.push('/recommendation')" v-if="user.position === '求职者'">推荐</a></li>
        <li><a @click="this.$router.push('/record')" v-if="user.position === '求职者'">申请记录</a></li>
        <li><a @click="this.$router.push('/resumebox')" v-if="user.position === 'HR'">简历箱</a></li>
        <li><a @click="this.$router.push('/EmpRecord')" v-if="user.position === 'HR'">发布历史</a></li>
        <li><a @click="userFeedback()">树叶社区</a></li>

      </ul>
    </div>
    <div>
      <UserMenu/>
    </div>
    <div style="position: absolute;top: 230px;left:380px;width: 800px;height:470px;background-color: white;border-radius: 31px"></div>
    <div style="position: absolute;top: 254px;left:650px;font-size: 20px;background-color: #669dff;color: white;border-radius: 10px;padding: 6px 6px">
      <p>发布招聘信息 挑选合适人才</p>
    </div>
    <div style="position: absolute;top: 314px;left:500px ;">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="公司名称" prop="firmname">
          <el-input v-model="ruleForm.firmname"></el-input>
        </el-form-item>
        <el-form-item label="招收岗位" prop="position">
          <el-input v-model="ruleForm.position"></el-input>
        </el-form-item>
        <el-form-item label="薪资范围" prop="wage">
          <el-radio-group v-model="ruleForm.wage">
            <el-radio label="3k~7k" ></el-radio>
            <el-radio label="7k~1w" ></el-radio>
            <el-radio label="1w~1.5w" ></el-radio>
            <el-radio label="1.5W及以上" ></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="联系人" prop="contacts">
          <el-input v-model="ruleForm.contacts"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
        <el-input v-model="ruleForm.phone"></el-input>
      </el-form-item>
        <el-form-item label="公司地址" prop="firmaddress">
          <el-input type="textarea" v-model="ruleForm.firmaddress"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm',user.account)">立即创建</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<style scoped>
ul {
  position: fixed;
  list-style-type: none;
  margin-left: 400px;
  padding: 0;
  overflow: hidden;
  background-color: #39494d;
}
li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li a:hover{
  color:#00e3e6 ;
}
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}
</style>
<script>
import axios from "axios";
import {ref} from "vue";
import request from "@/Utils/request.js";
import UserMenu from "@/components/UserMenu.vue";
export default {
  data() {
    return {
      ruleForm: {
        firmname: '',
        position: '',
        date1: '',
        date2: '',
        delivery: false,
        wage: '',
        resource: '',
        firmaddress: '',
        contacts:'',
        phone:'',
      },
      user:localStorage.getItem("user")?JSON.parse(localStorage.getItem("user")):{},
      rules: {
        firmname: [
          { required: true, message: '请输入公司名称', trigger: 'blur' },
          { min: 3, max: 25, message: '长度在 3 到 25 个字符', trigger: 'blur' }
        ],
        position: [
          { required: true, message: '请输入招收岗位', trigger: 'blur' },
          { min: 3, max: 25, message: '长度在 3 到 25 个字符', trigger: 'blur' }
        ],
        wage: [
          { required: true, message: '请至少选择一个薪资范围', trigger: 'change' }
        ],
        firmaddress: [
          { required: true, message: '请填写公司地址', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入联系电话', trigger: 'blur' },
          { min: 11, max: 11, message: '长度应为11位数', trigger: 'blur' }
        ],
        contacts: [
          { required: true, message: '请输入联系人', trigger: 'blur' },
          { min: 2, max: 5, message: '长度在 2到5 个字符', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    exit()
    {
      localStorage.removeItem("user");
      this.$router.push('/')
      this.$message({
        message:'退出成功!',
        type:'success'
      })
    },
    submitForm(formName,account) {
      // 使用 $refs 获取表单引用
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 如果表单验证通过，获取表单数据
          const formData = {
            firmname: this[formName].firmname,
            position: this[formName].position,
            wage: this[formName].wage,
            contacts: this[formName].contacts,
            phone: this[formName].phone,
            firmaddress: this[formName].firmaddress
          };
          // 发送 POST 请求到服务器前端发布雇佣信息插入数据库employee表中
          request.post(`/user/employee/${account}`, formData).then(res => {
                alert('招聘栏目创建成功');
            setTimeout(()=>{
              location.reload()
            },1000);
              })
              .catch(error => {
                console.error('提交失败：', error);
                alert('创建失败，请稍后再试！');
              });
        } else {
          console.log('表单验证失败');
          return false; // 或者进行其他处理
        }
      });
    }
    ,
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  },
  computed:{

  },
  components:{
    UserMenu
  }
}
</script>
